<template>
  <div id="gbServerEdit" >
    <Modal v-model="show"  :loading="modal.loading" :title="modal.title" width="700px"
           :mask-closable="false" :on-visible-change="onVisibleChange"
           :footer-hide=true :closable="false">
      <Form ref="formValidate" :model="rowData" label-position="right" :label-width="100" :rules="rules">
        <FormItem :label="$t('domain')" prop="domain">
          <Input v-model="rowData.domain" :readonly="modal.readonly">
            <Button slot="append" v-if="inzhCn && !showCodeBox" icon="ios-arrow-down" @click="openGbConfig" :title="$t('code_rule_show')"></Button>
            <Button slot="append" v-if="inzhCn && showCodeBox" icon="ios-arrow-down" @click="closeGbConfig" :title="$t('code_rule_hide')"></Button>
          </Input>
        </FormItem>
        <FormItem v-show="showCodeBox">
          <GbCodeRule v-show="showCodeBox" v-model="codeRule"></GbCodeRule>
        </FormItem>

        <FormItem :label="$t('code')" prop="code">
          <Input v-model="rowData.code" :readonly="modal.readonly"></Input>
        </FormItem>

        <FormItem :label="$t('port')" prop="port"><Input v-model="rowData.port" :readonly="modal.readonly"></Input></FormItem>
        <FormItem :label="$t('name')"><Input v-model="rowData.name" :readonly="modal.readonly"></Input></FormItem>
        <FormItem label="IP" prop="host"><Input v-model="rowData.host" :readonly="modal.readonly"></Input></FormItem>
        <FormItem :label="$t('user')"><Input v-model="rowData.userName" :readonly="modal.readonly"></Input></FormItem>
        <FormItem :label="$t('password')"><Input v-model="rowData.passwrd" :readonly="modal.readonly"></Input></FormItem>
        <FormItem :label="$t('http_port')" prop="apiPort"><Input v-model="rowData.apiPort" :readonly="modal.readonly"></Input></FormItem>
        <FormItem>
          <div style="float: right;">
            <Button type="primary"  @click="save" >{{$t("submit")}}</Button>
            <Button @click="close">{{$t("cancel")}}</Button>
          </div>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
  import GbCodeRule from "@/view/GbServer/GbCodeRule";
  import {ipValid,portValid} from "@/components/validate/FormValidate";
  import {queryPage,addGbServer,updateGbServer,removeGbServer} from '@/api/gbserver';
  import {apiResult} from "@/libs/util";
  export default {
    name: 'gbServerEdit',
    components:{GbCodeRule},
    computed:{
      rules(){
        return{
          code:[{required: true, message: this.$t("code_must_be_enter"), trigger: 'blur'},{type:'string',min:20,max:20,message: this.$t("code_must_be_20digits"), trigger: 'blur'}],
          domain:[{required: true, message: this.$t("domain_must_be_enter"), trigger: 'blur'},{type:'string',min:10,max:10,message: this.$t("domain_must_be_10digits"), trigger: 'blur'}],
          host:[{required: true, message: this.$t("ip_must_be_enter"), trigger: 'blur'},{type:'string',validator: ipValid, message: this.$t("enter_a_valid_ip"), trigger: 'blur'}],
          port: [{required: true, message: this.$t("port_must_be_enter"), trigger: 'blur'},{type: 'string',validator: portValid, message: this.$t("enter_a_valid_port"), trigger: 'blur'}],
          //mediaPort: [{required: true, message: '端口必须输入', trigger: 'blur'},{type: 'string',validator: portValid, message: '请输入有效的端口', trigger: 'blur'}],
          //apiPort: [{required: true, message: '端口必须输入', trigger: 'blur'},{type: 'string',validator: portValid, message: '请输入有效的端口', trigger: 'blur'}],
        }
      },
    },
    watch: {
      'rowData'(newValue,oldValue){
        //console.log("rowData: o%,o%",newValue,oldValue)
        if (!!newValue){
          this.codeRule.cityId = this.rowData.cityId;
          this.codeRule.businessId = this.rowData.businessId;
          this.codeRule.centerTypeId = this.rowData.centerTypeId;
          this.codeRule.deviceTypeId = this.rowData.deviceTypeId;
          this.codeRule.netIdentityId = this.rowData.netIdentityId;
        }else{
          this.codeRule.cityId = null;
          this.codeRule.businessId = null;
          this.codeRule.centerTypeId = null;
          this.codeRule.deviceTypeId = null;
          this.codeRule.netIdentityId = null;
        }
      },
      'show'(newValue,oldValue){
        //console.log("show: o%,o%",newValue,oldValue)
        if (newValue == false){
          this.$refs["formValidate"].resetFields();
          //this.rowData=null;
        }

      }
    },
    data(){
      return{
        show:false,
        codeRule:{
          cityId: null,
          businessId: null,
          centerTypeId: null,
          deviceTypeId: null,
          netIdentityId: null,
        },
        showCodeBox:false,
        modal:{
          loading:false,
          readonly:false,
          title:"",
          action:"VIEW",
          callback:null
        },
        rowData: {
          id: null,
          name: null,
          code: null,
          host: null,
          port: null,
          domain: null,
          userName: null,
          passwrd: null,
          mediaPort: null,
          apiPort: null,
          cityId: null,
          businessId: null,
          centerTypeId: null,
          deviceTypeId: null,
          netIdentityId: null
        },
        inzhCn: true   //是否中文版

      }
    },
    methods: {
      initRow(){
        return {
          id: null,
          name: null,
          code: null,
          host: null,
          port: null,
          domain: null,
          userName: null,
          passwrd: null,
          mediaPort: null,
          apiPort: null,
          cityId: null,
          businessId: null,
          centerTypeId: null,
          deviceTypeId: null,
          netIdentityId: null
        }
      },
      openGbConfig:function (){
        this.showCodeBox = true;
      },
      closeGbConfig:function (){
        this.showCodeBox = false;
      },
      openDialog: function (action,row, callback) {
        //console.log("openDialog: o%",row);
        this.show=true;
        this.modal.readonly=false;
        this.modal.callback = callback;
        this.modal.action = action;
        if (action=="ADD"){
          this.modal.title=this.$t("new");
          this.rowData = this.initRow();
          //this.$refs["formValidate"].resetFields();
        }else if (action=="VIEW"){
          this.modal.title=this.$t("browse");
          this.modal.readonly=true;
        }else if (action=="EDIT"){
          this.modal.title=this.$t("modify");
        }
        if (row != null) {
          //console.log("row: o%",row)
          this.rowData = row;
          /*this.codeRule.cityId = row.cityId;
          this.codeRule.businessId = row.businessId;
          this.codeRule.centerTypeId = row.centerTypeId;
          this.codeRule.deviceTypeId = row.deviceTypeId;
          codeRule.netIdentityId = row.netIdentityId;*/
        }
      },
      save: function(){
        let that = this;
        this.$refs["formValidate"].validate((valid) => {
          if (that.modal.action == "VIEW"){
            that.close();
          }
          if (valid) {
            that.rowData.cityId = that.codeRule.cityId;
            that.rowData.businessId = that.codeRule.businessId;
            that.rowData.centerTypeId = that.codeRule.centerTypeId;
            that.rowData.deviceTypeId = that.codeRule.deviceTypeId;
            that.rowData.netIdentityId = that.codeRule.netIdentityId;


            /** 新增 */
            if (that.rowData.id == null){
              //console.log("新增");
              addGbServer(JSON.stringify(that.rowData)).then(res => {
                apiResult(res.data,true,result=>{
                  if (!!that.modal.callback) that.modal.callback();
                  that.close();
                })
              })
            }else{
              console.log("修改");
              updateGbServer(JSON.stringify(that.rowData)).then(res => {
                apiResult(res.data,true,result=>{
                  if (!!that.modal.callback) that.modal.callback();
                  that.close();
                })
              })
            }
          } else {
            that.$Message.error(this.$t('save_data_failure'));
          }
        })
      },
      close: function(){
        console.log("close");
        this.show = false;
        this.$refs["formValidate"].resetFields();
      },
      onVisibleChange:function (state){
        //console.log("onVisibleChange: o%",state);
      }
    },
    mounted(){
      this.rowData = this.initRow();
      this.inzhCn = this.$i18n.locale === 'zh-CN';
    }
  }
</script>

<style lang="less">
  @import ".././template";
</style>
